<%-- 
    Document   : allocatecourse
    Created on : 24 Sep 2013, 11:23:38 PM
    Author     : Salman Noor : School of Electrical and Information Engineering
--%>
<%@taglib prefix="kendo" uri="http://www.kendoui.com/jsp/tags"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ include file="/WEB-INF/common/hometaglibs.jsp" %>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <body>
        <div id="mainContainer">
            <h1 class="exampleTitle"><strong>Work Allocation</strong> System</h1>            
            <div id="mainSubContainer">
                <div id="leftNav">
                    <%@include file="/WEB-INF/includes/sideNavBar.jsp" %>
                </div>
                <div id="actualSuperContentContainer">
                    <h1 class="exampleTitle subTitle">Allocate <strong>Course</strong></h1>   
                    <input name='baseURL' type='hidden' value='<c:url value="/approvals/Allocate/"/>'/>
                    <input name='disciplineURL' type='hidden' value='<c:url value="/approvals/Allocations/"/>'/>

                    <div id="example" class="k-content">     
                        <div id="successMessage" style="display:none;" class="k-block k-success-colored"><span class="k-icon k-i-tick"></span> &nbsp;&nbsp;Course has been successfully allocated.</div>
                        <div id="errorMessage" style="display:none;" class="k-block k-error-colored"><span class="k-icon k-i-exception"></span> &nbsp;&nbsp;<span>Error. Course allocation could not be saved. Possible Cause:&nbsp; </span><span></span></div>
                        <div class='formElementHolder'>
                            <label for="discipline" class="k-label-top">Select Discipline:</label>
                            <input id="discipline" name="discipline" style="width: 350px;" required data-message="discipline is required" />
                        </div>
                        <div class='formElementHolder'>
                            <label for="staff_member" class="k-label-top">Select Staff Member:</label>
                            <input id="staff_member" name="staff member" style="width: 350px;"  disabled="disabled" required data-message="staff member is required" />
                        </div>
                        <div class='formElementHolder'>
                            <label for="course_allocation" class="k-label-top">Select Course:</label>
                            <input id="course_allocation" name="course allocation" style="width: 350px;" disabled="disabled" required data-message="course is required" />
                        </div>
                        <div class='formElementHolder'>
                            <label for="start_date" class="k-label-top">Start Date for Course:</label>
                            <input id="start_date" name="start date" style="width:350px;"  disabled="disabled" required data-message="start date is required" />
                        </div>
                        <button id="allocateCourse" class="k-button">Allocate Course</button>
                    </div>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function() {
                var disciplineURL = $("input[name='disciplineURL']").val();
                var baseURL = $("input[name='baseURL']").val();
                var currentDisciplineID = 1;


                $("#allocateCourse").click(function(e) {
                    e.preventDefault();
                    if ($validatable.data("kendoValidator").validate()) {

                        $.ajax({
                            type: "POST",
                            async: true,
                            url: baseURL + "create",
                            data: {academic_staff_id: staff_member.value(), course_id: course_allocation.value(), start_date: $("#start_date").val()},
                            error: function(xhr, status, error) {
                                $("#errorMessage").find("span:last").empty();

                                $("#errorMessage").find("span:last").text(error);
                                $("#errorMessage").fadeIn("normal", function() {
                                    setTimeout(function() {
                                        $("#errorMessage").fadeOut();
                                    }, 5000);
                                });
                            },
                            success: function(data) {
                                $("#actualSuperContentContainer").find("input").val("");
                                $("#successMessage").fadeIn("normal", function() {
                                    setTimeout(function() {
                                        $("#successMessage").fadeOut();
                                    }, 3000);

                                });

                            }
                        });
                    }
                });

                var disciplines = $("#discipline").kendoComboBox({
                    autobind: false,
                    placeholder: "Select Discipline...",
                    change: function() {
                        currentDisciplineID = this.value();
                        $datePicker.data("kendoDatePicker").enable(true);
                        staff_member.dataSource.read({discipline_id: currentDisciplineID});
                        course_allocation.dataSource.read({discipline_id: currentDisciplineID});
                    },
                    dataTextField: "discipline_code",
                    dataValueField: "discipline_id",
                    filter: "contains",
                    dataSource: {
//                                                pageSize: 10,
//                                                serverPaging: true,
//                                                serverFiltering: true,
//                                                serverSorting: true,
                        transport: {
                            read: {
                                url: disciplineURL + "disciplines",
                                //using jsfiddle echo service to simulate JSON endpoint
                                dataType: "json",
                                type: "POST",
                            }
                        }
                    }
                }).data("kendoComboBox");




                var staff_member = $("#staff_member").kendoComboBox({
                    cascadeFrom: "discipline",
                    autoBind: false,
                    filter: "contains",
                    placeholder: "Select Staff Member...",
                    dataTextField: "full_descriptive_name",
                    dataValueField: "user_id",
                    dataSource: {
//                                  pageSize: 10,
//                                serverPaging: true,
//                                serverFiltering: true,
//                                serverSorting: true,
                        transport: {
                            read: {
                                url: baseURL + "staffmembers",
                                dataType: "json",
                                type: "GET"
                            },
                        }
                    }
                }).data("kendoComboBox");





                var course_allocation = $("#course_allocation").kendoComboBox({
                    cascadeFrom: "discipline",
                    autoBind: false,
                    filter: "contains",
                    placeholder: "Select Course...",
                    dataTextField: "course_full_name",
                    dataValueField: "course_id",
                    dataSource: {
//                                  pageSize: 10,
//                                serverPaging: true,
//                                serverFiltering: true,
//                                serverSorting: true,
                        transport: {
                            read: {
                                url: baseURL + "courses",
                                dataType: "json",
                                type: "GET"
                            },
                        }
                    }
                }).data("kendoComboBox");

                var $datePicker = $("#start_date").kendoDatePicker({
                    format: "yyyy-MM-dd"
                });

            });

            var $validatable = $("#actualSuperContentContainer").kendoValidator({
                rules: {
                    custom: function(input) {
                        if (input.is("[name='start date']")) {
                        }
                        return true;
                    }
                }

            });



        </script>
        <style>
            .formElementHolder{width:700px;padding: 15px;}
            .formElementHolder label{float:left;width:200px; text-align: right; padding-right: 10px;}

        </style>
    </body>
</html>
